<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hover</title>
	<meta name="keywords" content="" />
    <meta name="description" content="LarryCMS Version:1.09" />
	<meta name="Author" content="larry" />
	<meta name="renderer" content="webkit">	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">	
	<meta name="apple-mobile-web-app-capable" content="yes">	
	<meta name="format-detection" content="telephone=no">	
	<link rel="Shortcut Icon" href="/favicon.ico" />
	<!-- load css -->
	<link rel="stylesheet" type="text/css" href="/static/common/frame/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="/static/common/css/gobal.css" media="all">
    <link rel="stylesheet" type="text/css" href="/static/images/hover/demopage.css" media="all">
    <link rel="stylesheet" type="text/css" href="/static/common/css/hover.css" media="all">
</head>
</head>
<body>
<div class="larry-grid larry-wrapper">
<div class="main">
			 <blockquote class="layui-elem-quote">
                <h1 class="inline-block">Hover</h1>
                <div class="larry-con inline-block">
                     点击对应标签复制hover样式到剪贴板
                </div>
            </blockquote>
            
			<div id="effects" class="effects">

				<h2>2D Transitions</h2>

				<a  class="hvr-grow">Grow</a>
				<a  class="hvr-shrink">Shrink</a>
				<a  class="hvr-pulse">Pulse</a>
				<a  class="hvr-pulse-grow">Pulse Grow</a>
				<a  class="hvr-pulse-shrink">Pulse Shrink</a>
				<a  class="hvr-push">Push</a>
				<a  class="hvr-pop">Pop</a>
				<a  class="hvr-bounce-in">Bounce In</a>
				<a  class="hvr-bounce-out">Bounce Out</a>
				<a  class="hvr-rotate">Rotate</a>
				<a  class="hvr-grow-rotate">Grow Rotate</a>
				<a  class="hvr-float">Float</a>
				<a  class="hvr-sink">Sink</a>
				<a  class="hvr-bob">Bob</a>
				<a  class="hvr-hang">Hang</a>
				<a  class="hvr-skew">Skew</a>
				<a  class="hvr-skew-forward">Skew Forward</a>
				<a  class="hvr-skew-backward">Skew Backward</a>
				<a  class="hvr-wobble-horizontal">Wobble Horizontal</a>
				<a  class="hvr-wobble-vertical">Wobble Vertical</a>
				<a  class="hvr-wobble-to-bottom-right">Wobble To Bottom Right</a>
				<a  class="hvr-wobble-to-top-right">Wobble To Top Right</a>
				<a  class="hvr-wobble-top">Wobble Top</a>
				<a  class="hvr-wobble-bottom">Wobble Bottom</a>
				<a  class="hvr-wobble-skew">Wobble Skew</a>
				<a  class="hvr-buzz">Buzz</a>
				<a  class="hvr-buzz-out">Buzz Out</a>
				<a  class="hvr-forward">Forward</a>
				<a  class="hvr-backward">Backward</a>


				<h2>Background Transitions</h2>

				<a  class="hvr-fade">Fade</a>
				<a  class="hvr-back-pulse">Back Pulse</a>
				<a  class="hvr-sweep-to-right">Sweep To Right</a>
				<a  class="hvr-sweep-to-left">Sweep To Left</a>
				<a  class="hvr-sweep-to-bottom">Sweep To Bottom</a>
				<a  class="hvr-sweep-to-top">Sweep To Top</a>
				<a  class="hvr-bounce-to-right">Bounce To Right</a>
				<a  class="hvr-bounce-to-left">Bounce To Left</a>
				<a  class="hvr-bounce-to-bottom">Bounce To Bottom</a>
				<a  class="hvr-bounce-to-top">Bounce To Top</a>
				<a  class="hvr-radial-out">Radial Out</a>
				<a  class="hvr-radial-in">Radial In</a>
				<a  class="hvr-rectangle-in">Rectangle In</a>
				<a  class="hvr-rectangle-out">Rectangle Out</a>
				<a  class="hvr-shutter-in-horizontal">Shutter In Horizontal</a>
				<a  class="hvr-shutter-out-horizontal">Shutter Out Horizontal</a>
				<a  class="hvr-shutter-in-vertical">Shutter In Vertical</a>
				<a  class="hvr-shutter-out-vertical">Shutter Out Vertical</a>


				<h2>Icons</h2>


				<a  class="hvr-icon-back">Icon Back</a>
				<a  class="hvr-icon-forward">Icon Forward</a>
				<a  class="hvr-icon-down">Icon Down</a>
				<a  class="hvr-icon-up">Icon Up</a>
				<a  class="hvr-icon-spin">Icon Spin</a>
				<a  class="hvr-icon-drop">Icon Drop</a>
				<a  class="hvr-icon-fade">Icon Fade</a>
				<a  class="hvr-icon-float-away">Icon Float Away</a>
				<a  class="hvr-icon-sink-away">Icon Sink Away</a>
				<a  class="hvr-icon-grow">Icon Grow</a>
				<a  class="hvr-icon-shrink">Icon Shrink</a>
				<a  class="hvr-icon-pulse">Icon Pulse</a>
				<a  class="hvr-icon-pulse-grow">Icon Pulse Grow</a>
				<a  class="hvr-icon-pulse-shrink">Icon Pulse Shrink</a>
				<a  class="hvr-icon-push">Icon Push</a>
				<a  class="hvr-icon-pop">Icon Pop</a>
				<a  class="hvr-icon-bounce">Icon Bounce</a>
				<a  class="hvr-icon-rotate">Icon Rotate</a>
				<a  class="hvr-icon-grow-rotate">Icon Grow Rotate</a>
				<a  class="hvr-icon-float">Icon Float</a>
				<a  class="hvr-icon-sink">Icon Sink</a>
				<a  class="hvr-icon-bob">Icon Bob</a>
				<a  class="hvr-icon-hang">Icon Hang</a>
				<a  class="hvr-icon-wobble-horizontal">Icon Wobble Horizontal</a>
				<a  class="hvr-icon-wobble-vertical">Icon Wobble Vertical</a>
				<a  class="hvr-icon-buzz">Icon Buzz</a>
				<a  class="hvr-icon-buzz-out">Icon Buzz Out</a>


				<h2>Border Transitions</h2>

				<a  class="hvr-border-fade">Border Fade</a>
				<a  class="hvr-hollow">Hollow</a>
				<a  class="hvr-trim">Trim</a>
				<a  class="hvr-ripple-out">Ripple Out</a>
				<a  class="hvr-ripple-in">Ripple In</a>
				<a  class="hvr-outline-out">Outline Out</a>
				<a  class="hvr-outline-in">Outline In</a>
				<a  class="hvr-round-corners">Round Corners</a>
				<a  class="hvr-underline-from-left">Underline From Left</a>
				<a  class="hvr-underline-from-center">Underline From Center</a>
				<a  class="hvr-underline-from-right">Underline From Right</a>
				<a  class="hvr-reveal">Reveal</a>
				<a  class="hvr-underline-reveal">Underline Reveal</a>
				<a  class="hvr-overline-reveal">Overline Reveal</a>
				<a  class="hvr-overline-from-left">Overline From Left</a>
				<a  class="hvr-overline-from-center">Overline From Center</a>
				<a  class="hvr-overline-from-right">Overline From Right</a>


				<h2>Shadow and Glow Transitions</h2>

				<a  class="hvr-shadow">Shadow</a>
				<a  class="hvr-grow-shadow">Grow Shadow</a>
				<a  class="hvr-float-shadow">Float Shadow</a>
				<a  class="hvr-glow">Glow</a>
				<a  class="hvr-shadow-radial">Shadow Radial</a>
				<a  class="hvr-box-shadow-outset">Box Shadow Outset</a>
				<a  class="hvr-box-shadow-inset">Box Shadow Inset</a>


				<h2>Speech Bubbles</h2>

				<a  class="hvr-bubble-top">Bubble Top</a>
				<a  class="hvr-bubble-right">Bubble Right</a>
				<a  class="hvr-bubble-bottom">Bubble Bottom</a>
				<a  class="hvr-bubble-left">Bubble Left</a>
				<a  class="hvr-bubble-float-top">Bubble Float Top</a>
				<a  class="hvr-bubble-float-right">Bubble Float Right</a>
				<a  class="hvr-bubble-float-bottom">Bubble Float Bottom</a>
				<a  class="hvr-bubble-float-left">Bubble Float Left</a>


				<h2>Curls</h2>

				<a  class="hvr-curl-top-left">Curl Top Left</a>
				<a  class="hvr-curl-top-right">Curl Top Right</a>
				<a  class="hvr-curl-bottom-right">Curl Bottom Right</a>
				<a  class="hvr-curl-bottom-left">Curl Bottom Left</a>
			</div>
		</div>
</div>
<!-- 加载js文件 -->
<script type="text/javascript" src="/static/common/frame/layui/layui.js"></script> 
<script type="text/javascript" src="/static/js/common.js"></script> 
<script type="text/javascript" src="/static/examples/js/hover.js"></script>
</body>
</html>